{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    爱鲜蜂 | 首页
{% endblock %}

{% block extcss %}
    <link rel="stylesheet" href="{% static 'home/css/home.css' %}">
    <link rel="stylesheet" href="{% static 'home/css/swiper.min.css' %}">
{% endblock %}

{% block extjs %}
    <script src="{% static 'home/js/swiper.min.js' %}"></script>
    <script src="{% static 'home/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="home">
{#      轮播图#}
        <div class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
                {% for wheel in wheels %}
                    <div class="swiper-slide">
                        <img src="{{ wheel.img }}" alt="">
                    </div>
                {% endfor %}
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

{#      导航#}
        <div class="nav">
            <ul>
                {% for nav in navs %}
                    <li>
                        <img src="{{ nav.img }}" alt="">
                        <span>{{ nav.name }}</span>
                    </li>
                {% endfor %}
            </ul>
        </div>

{#      每日必购#}
        <div class="swiper-container" id="mustbuySwiper">
            <div class="swiper-wrapper">
                {% for mustbuy in mustbuys %}
                    <div class="swiper-slide">
                        <img src="{{ mustbuy.img }}" alt="">
                    </div>
                {% endfor %}
            </div>
        </div>

{#      商品部分#}
        <div class="shop">
            <div class="shophead">
                <a href="#">
                    <img src="{{ shophead.img }}" alt="">
                </a>
            </div>

            <div class="shoptab">
                {% for tab in shoptabs %}
                    <a href="#">
                        <img src="{{ tab.img }}" alt="">
                    </a>
                {% endfor %}
            </div>

            <ul class="shopclass">
                {% for item in shopclass %}
                    <li>
                        <a href="#">
                            <img src="{{ item.img }}" alt="">
                        </a>
                    </li>
                {% endfor %}
            </ul>

            <ul class="shopcommend">
                {% for item in shopcommends %}
                    <li>
                        <a href="#">
                            <img src="{{ item.img }}" alt="">
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>

{#      商品列表#}
        <div class="main">
            {% for mainShow in mainShows %}
                <div class="main-wrapper">
                    <div class="title">
                        {{ mainShow.name }}
                        <a href="#"> 更多 </a>
                        <span></span>
                    </div>

                    <div class="headimg">
                        <img src="{{ mainShow.img }}" alt="">
                    </div>

                    <div class="shoplist">
                        <div class="shopitem">
                            <a href="#">
                                <img class="img" src="{{ mainShow.img1 }}" alt="">
                                <span class="desc">{{ mainShow.longname1 }}</span>
                                <span class="price">{{ mainShow.price1 }}</span>
                                <span class="marketprice">{{ mainShow.marketprice1 }}</span>
                            </a>
                            <button><span>+</span></button>
                        </div>

                        <div class="shopitem">
                            <a href="#">
                                <img class="img" src="{{ mainShow.img2 }}" alt="">
                                <span class="desc">{{ mainShow.longname2 }}</span>
                                <span class="price">{{ mainShow.price2 }}</span>
                                <span class="marketprice">{{ mainShow.marketprice2 }}</span>
                            </a>
                            <button><span>+</span></button>
                        </div>

                        <div class="shopitem">
                            <a href="#">
                                <img class="img" src="{{ mainShow.img3 }}" alt="">
                                <span class="desc">{{ mainShow.longname3 }}</span>
                                <span class="price">{{ mainShow.price3 }}</span>
                                <span class="marketprice">{{ mainShow.marketprice3 }}</span>
                            </a>
                            <button><span>+</span></button>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}